<template>
  <section class="component message-box">
    <data-box :selection-list.sync="selectionList" :stripe="queryMsgModel.readStatus === 'READ'" :rowClassName="getRowClass" ref="databox" row-key="id" :data="messageDataSet" :page="pageService" @onPageChange="refreshData">
      <template slot="buttons">
        <el-radio-group v-model="queryMsgModel.readStatus" size="mini" @change="onStateChange">
          <el-radio-button label="">全部</el-radio-button>
          <el-radio-button label="READ">已读</el-radio-button>
          <el-radio-button label="UNREAD">未读</el-radio-button>
        </el-radio-group>
      </template>
      <template slot="append">
        <el-button @click="deleteMessages">删除</el-button>
      </template>
      <template slot="columns">
        <!-- <el-table-column prop="type" label="消息类型" :min-width="$helper.getColumnWidth(5)" :formatter="row => $filter.enumConvert(row.type,'reminderType')"></el-table-column> -->
        <el-table-column prop="title" label="消息标题" align="left" :show-overflow-tooltip="true" :min-width="$helper.getColumnWidth(8)"></el-table-column>
        <el-table-column prop="createTime" label="日期" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.dateFormat(row.createTime)"> </el-table-column>
        <el-table-column label="查看详情" :min-width="$helper.getColumnWidth(4)">
          <template slot-scope="scope">
            <el-button size="small" @click="emitViewDetail(scope.row)" type="text">查看</el-button>
            <el-button size="small" @click="deleteMessageRecord(scope.row.id)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import { Dependencies } from "~/core/decorator";
import { ReminderMessageService } from "~/services/common-service/reminder-message.service";
import { PageService } from "~/utils/page.service";
import DataBox from "~/components/common/data-box.vue";
import { messageState } from "~/config/enum.config";
import { Prop, Watch, Emit, Component } from "vue-property-decorator";

@Component({
  components: {
    DataBox
  }
})
export default class MessageBox extends Vue {
  @Dependencies(ReminderMessageService) private reminderMessageService: ReminderMessageService;
  @Dependencies(PageService) private pageService: PageService;
  @Prop() private visible

  private messageDataSet: any[] = [];
  private selectionList = [];
  private queryMsgModel = {
    readStatus: ""
  }

  /**
   * 初始化
   */
  private mounted() {
    this.refreshData();
  }

  @Emit("update-msg-count")
  private emitUpdateMsgCount() { return }

  @Emit("view-detail")
  private emitViewDetail(data) {
    this.setReadState(data.id)
  }

  @Watch("visible")
  private onVisibleChange(value) {
    if (value) {
      this.refreshData()
    }
  }
  /**
   * 获取行样式
   */
  private getRowClass(scope, index) {
    return (scope.row.state as string).toLowerCase()
  }

  /**
   * 刷新数据
   */
  private refreshData() {
    this.reminderMessageService
      .getReminderMessages(this.queryMsgModel.readStatus, this.pageService)
      .subscribe(data => {
        this.messageDataSet = data; 
        // if(this.messageDataSet){
        //   this.messageDataSet.forEach(x=>{
        //     if(x.caseNumber != null && x.caseNumber.lenght > 0){
        //       x.contentList = x.content.split(x.caseNumber); 
        //       console.log(x.content.split(x.caseNumber));             
        //     } 
        //   })
        // }       
      });
  }

  /**
   * 查询类型变更
   */
  private onStateChange() {
    this.pageService.reset()
    this.refreshData()
  }

  /**
   * 批量删除消息
   */
  private deleteMessages() {
    if (this.selectionList.length === 0) {
      this.$message('请选择要删除的消息')
    }
    const messageIdList = this.selectionList.map((x: any) => x.id);
    this.deleteMessageRecord(...messageIdList)
  }

  /**
   * 从服务器删除消息数据
   */
  private deleteMessageRecord(...ids: string[]) {
    this.reminderMessageService.batchDelete(ids).subscribe(() => {
      this.pageService.reset();
      this.refreshData();
      this.emitUpdateMsgCount();
    }
    );
  }

  /**
   * 设置消息为已读状态
   */
  private setReadState(id) {
    this.reminderMessageService.setMessageRead(id).subscribe(() => {
      if(this.messageDataSet.length === 1){
        this.pageService.reset();
      }
      this.refreshData()
    })
  }
}
</script>

<style lang="less">
.message-box.component {
  .data-box {
    .el-table__row {
      &.unread {
        background-color: #f2feff !important;
      }
    }
  }
}
</style>
